<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <button id="b1" onclick="alert('不要点我')">点我</button>
    <button id="b2" onclick="fn()">按钮</button>
</body>

</html>
<script>
    //事件绑定：就是将事件源、事件类型、事件处理程序三者结合到一起，事件一旦发生，就自动处理相关逻辑
    //绑定方式

    //1、行内绑定:在标签上使用on开头的属性设置js代码
    //结构与行为没有分离 但是针对未来元素 可以使用 比较简单
    function fn(){
        console.log('fn按钮被点击')
    }


    //2、动态绑定：使用dom对象.事件名称=事件处理程序
    document.querySelector('button').onclick=function(){
        console.log('b1被点击了');
    };
    //可以使用#id绑定标签
    document.querySelector('#b2').onclick=function(){
        console.log("b2被点击了")
    }

    //如果事件相同，也可以使用forEach遍历
    document.querySelectorAll('button').forEach(function(dom){
        console.log(dom);
        dom.onclick=function(){
            console.log('我被点击了');
        }
    })
</script>